VUE es6技巧写法（持续更新中~~~）

[toc]

为class绑定多个值

• 普通写法

  :class="{a: true, b: true}"

• 其他

  :class="['btn', 'btn2', {a: true, b: false}]"

一个值判断a或者判断b

• 普通写法

  if(flg === a || flg === b)

• 其他

  ['a','b'].indexOf(flg) > -1

引用一个组件

• 普通写法

  import a from './a.vue'
  componets: {
    a
  }

• node写法

  components: {
    a: require('./a.vue')
  }

V-FOR渲染

• 一般

  <li v-for="(item,index) in data" :key="index">
    {{item.uuid}} //输出uuid字段
  </li>

• 解构赋值

  <li v-for="{uuid} in data" :key="uuid">
    {{uuid}} //直接解构赋值输出
  </li>

CSS私有化

• 一般

  设置比较长的class类名区分，或者使用BEN等命名方法

• css module

  <style module>
    .h3 {}
  </style>

style样式会存在$style计算属性中

//调用方式
<h3 :class="$style.h3"></h3>
//$style是计算属性，所以也可以这样 bool为Bool表达式
<h3 :class="{$style.h3: bool}"></h3>

缺点： 生成一个独一无二的class类名，只能使用类名class控制样式

• scoped

  <style scoped>
  </style>

生成Hash属性标识.且根元素受父组件的scoped影响

解决办法

使用>>>深度选择器

//寻找div下的样式，包括子组件样式
div >>> .h3 { }

对象操作

对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。

// bad
const a = {};
a.x = 3;

// if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 });

// good
const a = { x: null };
a.x = 3;

如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

// bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,  //属性表达式 6
};

数组、对象参数使用扩展运算符(spread)

连接多个数组

• 一般

  let arr1 = [1,2,3]
  let arr2 = [4,6,7]
  arr2 =  arr2.concat(arr1)

• spread 运算符

  let arr1 = [1,2,3]
  let arr2 = [...arr1,4,6,7]

连接多个json对象

• 一般

  var a = { key1: 1, key2: 2 }
  var b = Object.assign({}, a, { key3: 3 })
  // 最后结果
  {key1: 1, key2: 2,key3: 3 }

• spread 运算符

  var a = { key1: 1, key2: 2 }
  var b = {...a, key3: 3}

es6剩余参数（rest paramete）

使用reset paramete是纯粹的Array实例

• 一般

  function a() {
    console.log(arguments)
  }
  a(1,2,3)

• es6

  function a(...args) {
    console.log(args)
  }
  a(1,2,3)

判断数组是否包含指定值

IE 任何系列都不支持

• 一般
  需要自己写工具函数

• es6

  var arr = [1,2,3]
  console.log(arr.includes(1)); // true
  console.log(arr.includes(4)); // false

顺序遍历对象key值

IE 任何系列都不支持

• es6

  var obj = { key1: 1, key2: 2, key3: 3 }
  Object.keys(obj); // ["key1", "key2", "key3"]

顺序遍历对象value值

IE 任何系列都不支持

• es6

  var obj = { key1: 1, key2: 2, key3: 3 }
  Object.values(obj); // [1,2,3]

解耦$route参数

• 一般

  computed: {
    id() {
        return this.$route.params.id
    }
  }

• 现在

  {
  path: '/user/:id',
  components: { default: User, sidebar: Sidebar },
  props: true
  }
  
  // 使用
  props: {
   id: String   
  }

根据vue-router文档, props属性有下面几种用法

• 布尔模式

  如果 props 被设置为 true，route.params 将会被设置为组件属性

• 对象模式

  如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用

• 函数模式(推荐)

  你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

  { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }

立即调用watch

{
    d: {
        handler: 'someMethods',
        immediate: true
    }
}

多个方法调用， 使用数组

// 你可以传入回调数组，它们会被逐一调用
e: [
  'handle1',
  function handle2 (val, oldVal) { /* ... */ },
  {
    handler: function handle3 (val, oldVal) { /* ... */ },
    /* ... */
  }
],

监听其他组件的生命周期

// API
this.$on('hook:created')
// template中
@hook:created="method"

实战情况：清除定时器

methods: {
    a() {
        let timer = setTimeout(() => {}, 1000);
        this.$once('hook:beforeDestroy', clearTimeout(timer));
    }
}

v-if v-show 懒加载

如果某个弹窗你想实现懒加载效果, 即刚开始是不存在dom的，第一次调用后初始化在dom上，以后再调用只是显示隐藏。

<div v-if="show1" v-show="show2">
// 这是弹窗内容
</div>

data() {
  return {
    show1: false,
  }
},
watch: {
  show2(val) {
    if(val) {
      this.show1 = true;
    }
  }
}